<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="cs.css"/>
		<script src="jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			function send() {
				var txt = document.getElementById("txt");
				if(txt.value.trim() == "") { //把空格取消，里边没值得时候不能发送
					return false;
				}
				mycreate();
				txt.value = "";
				middle.scrollTop = middle.scrollHeight;
			}
			//enter 提交
			function tijiao(e) {
				if(e.keyCode == 13 && e.ctrlKey) {
					var txt = document.getElementById("txt");
					txt.value += "\n"; //ctrl+enter是换行
					return false;
				} else if(e.keyCode == 13) {
					send(); //提交
					e.returnValue = false;
					return false;
				}
			}

			$(function() {
				$("#but1").click(function() {
					var div = $('<div id="rigt"><div class="face"></div></div>');
					var tex = $("<div class='tex'>" + $('#txt').val() + "</div>");
					div.append(tex);
					$("#middle").append(div);
					$.get("http://www.tuling123.com/openapi/api", {
						key: "0db996e62ad2434094778b1ebeafc727",
						info: $("#txt").val(),
						userid: "123456"
					}, function(date) {
						//处理机器人返回的信息
						//处理航班
						var urltex = ""
						if(date.url) {
							urltex = "<a  href='" + date.url + "' target='_blank'+>" + "点击显示" + "</a>"
						}
						//处理新闻
						if(date.list) {
							var div1 = $('<div id="left"><div class="face"></div></div>');
							var tex1 = $("<div id='center'></div>");
							var div2 = $("<div id='center_datu'></div>");
							var img = $("<img src='" + date.list[0].icon + "' />");
							var p = $("<p id='center_datu_p'></p>");
							var a = $("<a href='" + date.list[0].detailurl + "' target='_blank'+>" + date.list[0].article + "</a>");
							var xidiv = $("<div></div>");
							var p1 = $("<p class='wu_top'></p>");
							var a1 = $("<a href='" + date.list[1].detailurl + "' target='_blank'+>" + date.list[1].article + "</a>");
							var img1 = $("<img id='img' src='" + date.list[1].icon + "' />");
							xidiv.append(img1);
							xidiv.append(p1);
							p1.append(a1);

							var p2 = $("<p class='wu_top'></p>");
							var a2 = $("<a href='" + date.list[2].detailurl + "' target='_blank'+>" + date.list[2].article + "</a>");
							var img2 = $("<img id='img' src='" + date.list[2].icon + "' />");
							xidiv.append(img2);
							xidiv.append(p2);
							p2.append(a2);

							p.append(a);
							div2.append(img);
							div2.append(p);
							tex1.append(div2);
							div1.append(tex1);
							tex1.append(xidiv)
							$("#middle").append(div1);
							$("#middle")[0].scrollTop = $("#middle")[0].scrollHeight;
						} else {
							var div1 = $('<div id="left"><div class="face"></div></div>');
							var tex1 = $("<div class='tex'>" + date.text + urltex + "</div>");
							div1.append(tex1);
							$("#middle").append(div1);
							$("#middle")[0].scrollTop = $("#middle")[0].scrollHeight;
						}
					})
					$("#middle")[0].scrollTop = $("#middle")[0].scrollHeight;
					$("#txt").val("");
				});
			})
		</script>
	</head>

	<body>
		<div id="main">
			<div id="top">
				H5前端开发第三期交流室
			</div>
			<div id="middle">
				<div id="left">
					<div class="face">

					</div>
					<div class="tex">
						1234
					</div>
				</div>
				<div id="rigt">
					<div class="face">

					</div>
					<div class="tex">
						23232
					</div>
				</div>
			</div>
			<div id="bottom">
				<div class="bottom-top">
					<select class="selt">
						<option value="">消息记录</option>
					</select>
				</div>
				<div class="bottom-middle">`
					<textarea onkeydown="tijiao(event)" name="" id="txt"></textarea>
				</div>
			</div>
		</div>
		<div id="footer">
			<input type="button" id="but1" value="发送" onclick="send()" />
			<input type="button" id="but2" value="关闭" />
		</div>
	</body>

</html>